<template>
  <div class="friend">
    <div class="gap"></div>

    <mu-list>
      <div class="item">
        <mu-list-item title="Video" @click="one('https://v.qq.com/')">
          <mu-icon slot="left" value="video_library" color="#d84315" />
          <mu-icon value="keyboard_arrow_right" slot="right" />
        </mu-list-item>
        <mu-divider inset />
        <mu-list-item title="Music" @click="one('https://y.qq.com/')">
          <mu-icon slot="left" value="headset" color="#1976d2" />
          <mu-icon value="keyboard_arrow_right" slot="right" />
        </mu-list-item>
      </div>
    </mu-list>

    <mu-list>
      <div class="item">
        <mu-list-item title="Book" @click="one('https://book.qq.com/')">
          <mu-icon slot="left" value="book" color="#1e88e5" />
          <mu-icon value="keyboard_arrow_right" slot="right" />
        </mu-list-item>
        <mu-divider inset />
        <mu-list-item title="News" @click="one('https://news.qq.com//')">
          <mu-icon slot="left" value="whatshot" color="#ef6c00" />
          <mu-icon value="keyboard_arrow_right" slot="right" />
        </mu-list-item>
      </div>
    </mu-list>

    <mu-list>
      <div class="item">
        <mu-list-item title="Game" @click="one('https://app383.acapp.acwing.com.cn:31443/')">
          <mu-icon slot="left" value="open_with" color="#1e88e5" />
          <mu-icon value="keyboard_arrow_right" slot="right" />
        </mu-list-item>
      </div>
    </mu-list>
  </div>
</template>
<script>
export default {
  name: 'discover',
  methods: {
    one(url) {
      window.open(url)
    }
  }
}
</script>
<style lang="stylus"  scoped>
@import '../../common/stylus/mixin.styl';

.friend {
  .item {
    background: color-w;
  }

  .gap {
    position: relative;
    height: 2vh;
  }

  .tab {
    height: 12vh;
    overflow: hidden;
    background: colot-w;

    .mu-tabs {
      background: color-w;
      color: color-b;
    }
  }
}
</style>
